<template>
	<!-- 评论显示弹窗  -->
	<page-container :show="comment_box.show" position="bottom" @enter="onEnter"  @clickoverlay="close">
		<view class="space-view">
			<!-- 关闭按钮  -->
			<view class="close" @click="close">
				<image src="/static/images/close.svg" mode="aspectFit"></image>
			</view>
		
			<!-- 评论显示区域  用scroll-view 做上拉加载 因为onReachBottom只能在父组件使用-->
			<scroll-view @scrolltolower="scrollBottm" :scroll-y="true" :show-scrollbar="false" class="scroll-height" :enhanced='true' >
				<block v-for="(item,index) in comment" :key="index">
					<!-- 评论区域 -->
					<view class="messages-views">
						<!-- 评论者头像左边 -->
						<view class="messages-avator">
							<image :src="item.avatarUrl" mode="aspectFill"></image>
						</view>
						<!-- 评论右边 -->
						<view class="message-deatil">
							<!-- 评论者昵称 评论时间 -->
							<view class="message-user">
								<view class="nickname">{{item.nickName}}</view>
								<view class="times">{{item.time}}</view>
							</view>
							<!-- 评论内容 -->
							<view class="messages-content">{{item.content}}</view>
						</view>	
					</view>
				</block>
				
				<!-- 没有评论的提示 -->
				<view class="tips" v-if="comment.length == 0">暂无评论，快来做第一个吧~</view>
				
				<!-- 上拉加载的提示 -->
				<view class="loading-height">
					<Loading v-show="loading"></Loading>
				</view>
				
				<view style="height: 100rpx;"></view>
			</scroll-view>
			
			<!-- 评论输入框 -->
			<view class="comment-box">
				<view class="comment-box-input">
					<!-- confirm-type="send" 将弹出软键盘的右下角按钮的文字显示为发送   -->
					<input  @confirm="sendComment"  v-model="content" type="text" placeholder="留下你的评论" confirm-type="send" cursor-spacing="50"  />
				</view>
				<view class="send-out" @click="sendComment">发送</view>
			</view>
		</view>
	</page-container>
</template>

<script setup>
	import moment from 'moment'
	// 登录组件
	import Login from '@/components/login-view.vue'
	// 评论组件
	import Comment from '@/pages/short-video/child/comment.vue'
	// 上拉加载圆圈组件
	import Loading from '@/components/loading.vue'
	
	import { onMounted, reactive, toRefs, watch, onBeforeUnmount } from 'vue'
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import { FeedBack } from "@/public/package-js/feedBack.js"
	
	// 登录方法
	import { LoginFun } from '@/public/package-js/login.js'
	
	// 引入用户没有登录时用以调用登录框的数据还有其余数据
	import { login_box,comment_box } from '@/public/package-js/passValue.js'

	// 1、弹窗进入触发
	function onEnter() {}
	
	let emit = defineEmits(['custom-event'])
	function close(){
		comment_box.show = false
		emit('custom-event')
	}

	const data = reactive({
		content:'', //用户输入的评论内容 
		comment: [], //接收评论的所有信息：头像，昵称等
		goods_id:'' ,// 视频评论的商品的id
		pageNum:0, // 请求的页数，每请求一次，页数 +1
		loading: false, // 上拉提示小圆圈
	})
	
	const {content,comment,pageNum,loading} = toRefs(data)


	// 2、监听父组件传值是否拉起评论框，是就开始请求数据
	watch(comment_box, (newVal, oldVal) => {
		// 当评论框被打开且这是第一次打开才请求数据，不然太耗费性能
		if (newVal.show && comment_box.num == 1) {
			// 将商品 id 赋值
			data.goods_id = comment_box.goods_id
			
			requestComment(comment_box.goods_id,data.pageNum)
		}
	})
  
	// 2-1 请求评论数据 
	const db = wx.cloud.database()
	
	async function requestComment(goods_id,pageNum) {
		let skip = pageNum * 10
		// 根据商品id查询
		const res = await db.collection('video_comment').where({ 
			goods_id:goods_id 
		}).field({ 
			_openid: false
		}).limit(10).skip(skip).orderBy('time', 'desc').get()
		
		if (skip == 0) {  // 首次拉十条
			data.comment = res.data //直接复制
		} else {  // 上拉加载
			data.comment = [...data.comment, ...res.data]
			data.loading = false
		}
	}
	
	// 3、上拉加载, 当 scroll-view 标签滚动到底部的时候触发
	function scrollBottm() {
		// console.log("到底啦");
		// 评论数据小于十条就不需要上拉加载了
		if (data.comment.length < 10){
			 return false
		}
		data.loading = true
		data.pageNum++
		requestComment(data.goods_id,data.pageNum)
	}
	

	// 3、提交评论
	// 设置中国时区
	moment.locale('zh-cn');
	
	async function sendComment() {
		// 如果输入的全是空格
		if (data.content.split(" ").join("").length == 0) { 
			new FeedBack("评论内容不能为空","none").toast()
			return false
		}
		const user = uni.getStorageSync('user_info') //取出本地缓存的用户信息
		if (!user) { 
			login_box.show = true; 
			return false
		}
		// 取当前时间 格式为 2023-02-01 16:21:18 东八区时间
		let time = moment().utcOffset(8).format('YYYY-MM-DD HH:MM:SS')
		const obj = {
			avatarUrl: user.avatarUrl,
			nickName: user.nickName,
			time,
			content: data.content,
			goods_id: data.goods_id,
		}
		try {
			// 将评论增加到数据库
			await db.collection('video_comment').add({ data: obj })
			// 置空输入框
			data.content = ''
			// 将评论加入数组的第一位，保证新增的评论在第一位
			data.comment.unshift(obj)
			new FeedBack("评论成功","none").toast()
		} catch (e) {
			new FeedBack("评论失败","error").toast()
		}
	}

</script>

<style scoped>
	.close {
		height: 30rpx;
		display: flex;
		justify-content: flex-end;
	}

	.close image {
		width: 30rpx;
		height: 30rpx;
	}

	.scroll-height {
		height: 1000rpx;
	}

	/* 评论内容 */
	.messages-views {
		margin: 20rpx 0;
		display: flex;
	}

	.messages-avator image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.messages-avator {
		height: 80rpx;
	}
	
	.message-deatil{
		flex:1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}
	.message-user{
		display: flex;
		justify-content: space-between;
	}
	.nickname {
		color: #8a8b90;
		font-size: 27rpx;
	}

	.times {
		color: #b0afb4;
		font-size: 25rpx;
	}

	/* 评论内容 */
	.messages-content {
		font-size: 28rpx;
		/* padding-left: 75rpx; */
		line-height: 1.4;
		margin: 20rpx 0;
	}

	/* 固定底部的评论框 */
	.comment-box {
		background-color: #f7f7f7;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 10rpx;
		display: flex;
		align-items: center;
		font-size: 27rpx;
		z-index: 99;
		padding-bottom: 68rpx;
	}

	.comment-box-input {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		height: 80rpx;
		flex: 1;
	}

	.comment-box-input input {
		padding: 0 15rpx;
		height: 80rpx;
	}

	.send-out {
		background-color: #07c160;
		color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		width: 150rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}

	.detail-page button {
		margin: 70rpx;
		width: 400rpx;
	}

	.detail-page {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
